<template>
    <!-- 查询顶栏 -->
    <a-collapse
    v-model:activeKey="activeKey"
    ghost
    >
      <a-collapse-panel header="高级搜索">
        <a-form layout="inline" :model="query" style="margin-bottom: 5px">
          <a-form-item style="width:150px">
            <a-input v-model:value="query.u_id">
              <template #prefix>ID:</template>
            </a-input>
          </a-form-item>

          <a-form-item style="width:150px">
            <a-input v-model:value="query.u_name">
              <template #prefix>用户名:</template>
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-select v-model:value="query.u_status">
              <a-select-option value="">不限状态</a-select-option>
              <a-select-option value="-1">已封禁</a-select-option>
              <a-select-option value="1">正常</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item>
            <a-select v-model:value="query.u_sex" style="width: 150px">
              <a-select-option value="">不限性别</a-select-option>
              <a-select-option value="1">男</a-select-option>
              <a-select-option value="2">女</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="出生日期：">
            <a-date-picker
              v-model:value="query.u_birth_start"
              placeholder="开始日期"
              valueFormat="YYYY-MM-DD"
            />
            至
            <a-date-picker
              v-model:value="query.u_birth_end"
              placeholder="结束日期"
              valueFormat="YYYY-MM-DD"
            />
        </a-form-item>

        <a-form-item>
          <a-button @click="getPage(1)" type="primary"
            ><template #icon><SearchOutlined /></template>查询</a-button
          >
        </a-form-item>
        </a-form>

      </a-collapse-panel>
    </a-collapse>

    <!-- 查询得到的用户数据表 -->
    <a-table
      :columns="columns"
      :dataSource="page.list"
      :pagination="pagination"
      @change="handleTableChange"
      :row-selection="rowSelection"
      :row-key="(record) => record.u_id"
    >
      <template #u_sex="{text}">
        {{ text === 1 ? "男": text===2? "女": "未填"}}
      </template>

      <template #u_status="{text}">
        {{ text === -1 ? "封禁中" : "正常"}}
      </template>
      <template #action="{ record }">
        <span>
          <a-button type="link" @click="onClickTab(record)">
            标签
          </a-button>
          <a-popconfirm
          title="确定要启用？" + record.u_name
          v-if="record.u_status===-1"
          @confirm="onClickEnable(record.u_id)"
          >
            <a-button type="link">启用</a-button>
          </a-popconfirm>
          <a-popconfirm
          title="确定要封禁？" + record.u_name
          v-if="record.u_status!=-1"
          @confirm="onClickDisable(record.u_id)"
          >
            <a-button type="link">封禁</a-button>
          </a-popconfirm>
        </span>
      </template>
    </a-table>

    <user-tab ref="UserTabRef"></user-tab>
</template>

<script setup>
import {ref, reactive, createVNode} from "vue";
import {get, post, tip} from "@/common";
import {Modal} from "ant-design-vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import UserTab from "./userTabs.vue";
import {useRouter} from "vue-router";

const router = useRouter();

const UserTabRef = ref();
const columns = [
  {
    dataIndex: "u_id",
    title: "ID"
  },
  {
    dataIndex: "u_name",
    title: "用户名"
  },
  {
    dataIndex: "u_sex",
    title: "性别",
    slots:{
      customRender: "u_sex"
    }
  },
  {
    dataIndex: "u_birth",
    title: "生日"
  },
  {
    dataIndex: "u_tel",
    title: "电话"
  },
  {
    dataIndex: "u_status",
    title: "状态",
    slots:{
      customRender: "u_status"
    }
  },
  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action"
    }
  }
];


const query = reactive({
  u_id: "",
  u_name: "",
  u_status: "",
  u_birth_start:"",
  u_birth_end: ""
});

const page = ref({});

const pagination = reactive({
  current: 1, //当前页
  pageSize: 10, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["5", "10", "20", "50", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  }
  });

  const getPage = (pageNum = 1) => {
    query.pageNum = pageNum;
    query.pageSize = pagination.pageSize;

    get("/buser/usermanage/queryUserList", query).then((res) => {
      page.value = res.data; //将服务端传来的分页数据赋值予page

      //更新分页引擎
      pagination.current = page.value.current;
      pagination.pageSize = page.value.pageSize;
      pagination.total = page.value.total;
    });
  };

  getPage(1); // 页面加载时获取第一页数据

  //当分页发送变化时（如：页码、每页记录数变化时）
  const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
    pagination.current = pagi.current;
    pagination.pageSize = pagi.pageSize;
    pagination.total = pagi.total;

    getPage(pagination.current);
  };

  const onClickEnable = (u_id) => {
    post("/buser/usermanage/permit?u_id="+u_id).then((res)=>{
          getPage(page.value.current);
          tip.success("启用成功");
        });
  };

  const onClickDisable = (u_id) => {
    post("/buser/usermanage/ban?u_id="+u_id).then((res)=>{
      getPage(page.value.current);
      tip.success("封禁成功");
    });
  };

  const onClickTab = (uObj) => {
    UserTabRef.value.open(uObj);
  };
</script>
